<template>
  <div :style="`width: ${_width}; height: ${_height}`">
    <img ref="image"
         :src="imgUrl" />
  </div>
</template>

<script>
import MagnifyingGlass from '../../utils/MagnifyingGlass'
export default {
  name: 'MagnifyingGlass',

  props: {
    imgUrl: String,
    width: {
      type: Number | String,
      default: '100%',
    },
    height: {
      type: Number | String,
      default: '100%',
    },
    glassOption: {
      type: Object,
      default: () => ({
        width: 150,
        height: 150,
        scale: 2,
      }),
    },
  },
  data() {
    return {
      glass: null,
    }
  },
  computed: {
    _width() {
      if (typeof this.width === 'number') {
        return this.width + 'px'
      } else if (typeof this.width === 'string') {
        return this.width
      } else {
        return '100%'
      }
    },
    _height() {
      if (typeof this.height === 'number') {
        return this.height + 'px'
      } else if (typeof this.height === 'string') {
        return this.height
      } else {
        return '100%'
      }
    },
  },
  mounted() {
    this.glass = new MagnifyingGlass({
      el: this.$refs.image,
      ...this.glassOption,
    })
    this.glass.start()
  },
  destroyed() {
    this.glass && this.glass.stop()
  },
}
</script>

<style scoped>
img {
  width: 100%;
}
</style>
